<template>
  <div class="layout-all">
    <div class="system-cls">
      <span>系统基础配置</span>
      <div> 用于系统基础展示等场景。 </div>
    </div>
    <div class="ele-body">
      <el-card shadow="never" header="基础配置" body-style="padding: 0;">      </el-card>

      <el-tabs v-model="active" class="user-info-tabs">
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-width="90px"
              style="max-width: 450px; padding: 34px 20px 0 20px"
              @keyup.enter.native="save"
              @submit.native.prevent
            >
              <el-form-item label="备案号:" prop="theRecord">
                <el-input
                  v-model="form.theRecord"
                  placeholder="请输入备案号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="京公网备案号:" prop="forTheRecord">
                <el-input
                  v-model="form.forTheRecord"
                  placeholder="请输入京公网备案号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="版本信息:" prop="versionInformation">
                <el-input
                  v-model="form.versionInformation"
                  placeholder="请输入版本信息"
                  clearable
                />
              </el-form-item>
              <el-form-item label="手机号:" prop="phones">
                <el-input
                  v-model="form.phones"
                  placeholder="请输入手机号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="邮箱:" prop="mailbox">
                <el-input
                  v-model="form.mailbox"
                  placeholder="请输入邮箱"
                  clearable
                />
              </el-form-item>
              <el-form-item label="地址:" prop="address">
                <el-input
                  v-model="form.address"
                  placeholder="请输入地址"
                  clearable
                />
              </el-form-item>
              <el-form-item label="上班时间:" prop="attendanceTime">
                <el-input
                  v-model="form.attendanceTime"
                  placeholder="请输入上班时间"
                  clearable
                />
              </el-form-item>
              <el-form-item label="浏览器图片:" class="flex-columns check-star">
                <div >
                  <el-upload
                    :on-change="onUpload"
                    class="avatar-uploader flex"
                    :action="ossUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div v-else class="avatar-uploader-icon flex-column">
                      <i class="el-icon-picture"></i>
                      <div>上传浏览器图标</div>
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="系统图片:" class="flex-columns check-star">
                <div>
                  <el-upload
                    :on-change="onUpload"
                    class="avatar-uploader flex"
                    :action="ossUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div v-else class="avatar-uploader-icon flex-column">
                      <i class="el-icon-picture"></i>
                      <div>上传系统图标</div>
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="登录背景:" class="flex-columns check-star">
                <div>
                  <el-upload
                    :on-change="onUpload"
                    class="avatar-uploader flex"
                    :action="ossUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div v-else class="avatar-uploader-icon flex-column">
                      <i class="el-icon-picture"></i>
                      <div>上传登录背景</div>
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="登录左侧图标:" class="flex-columns check-star">
                <div>
                  <el-upload
                    :on-change="onUpload"
                    class="avatar-uploader flex"
                    :action="ossUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div v-else class="avatar-uploader-icon flex-column">
                      <i class="el-icon-picture"></i>
                      <div>上传登录左侧图标</div>
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="客服二维码:" class="flex-columns check-star">
                <div>
                  <el-upload
                    :on-change="onUpload"
                    class="avatar-uploader flex"
                    :action="ossUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div v-else class="avatar-uploader-icon flex-column">
                      <i class="el-icon-picture"></i>
                      <div>上传客服二维码</div>
                    </div>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :loading="loading" @click="save">
                  保存更改
                </el-button>
              </el-form-item>
            </el-form>
        </el-tabs>
    </div>

    <!-- 头像裁剪弹窗 -->
    <ele-cropper-dialog
      :src="form.avatar"
      :show.sync="visible"
      :lock-scroll="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :options="{ autoCropArea: 1, viewMode: 1, dragMode: 'move' }"
      @crop="onCrop"
    />
  </div>
</template>

<script>
  import EleCropperDialog from 'ele-admin/es/ele-cropper-dialog';

  export default {
    name: 'UserProfile',
    components: { EleCropperDialog },
    data() {
      return {
        // tab页选中
        active: 'info',
        // 表单数据
        form: {
          nickname: '',
          sex: '1',
          email: '',
          tellPre: '',
          tell: '',
          avatar: ''
        },
        // 表单验证规则
        rules: {
          nickname: [
            {
              required: true,
              message: '请输入昵称',
              trigger: 'blur'
            }
          ],
          sex: [
            {
              required: true,
              message: '请选择性别',
              trigger: 'blur'
            }
          ],
          email: [
            {
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            }
          ]
        },
        // 保存按钮loading
        loading: false,
        // 是否显示裁剪弹窗
        visible: false
      };
    },
    computed: {
      // 登录用户信息
      loginUser() {
        return this.$store.state.user.info;
      },
    },
    created() {
      Object.assign(this.form, this.loginUser, {
        tellPre: '0752',
        tell: ''
      });
    },
    methods: {
      /* 保存更改 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.$message.success('保存成功');
            this.updateLoginUser(this.form);
          }, 800);
        });
      },
      /* 上传 */
      onUpload(file) {
        this.fileList.push(file)
      },
      async uploadBj(){
              if(this.fileList.length < 1) {
                if(this.imageUrl){
                  this.$message.error('重复文件');
                }
                else{
                  this.$message.error('请选择文件后提交');
                }
                return
              }
              // 获取文件上传签名数据
              this.data = await userOssSignature()
              for(let i=0;i<this.fileList.length;i++){
                let file = this.fileList[i].raw
                console.log('file=----------',file)
                let filename=file.name;
                let markIndex=(filename).lastIndexOf('.');
                let suffix=filename.substring(markIndex)
                let date=new Date().getTime();
                // 构建请求参数
                let param = new FormData()
                param.append("key", this.data.dir + date+suffix)
                param.append("policy", this.data.policy)
                param.append("OSSAccessKeyId", this.data.accessId)
                param.append("success_action_status", '200')
                // param.append("callback",  this.data.callback)     //回调（not)
                param.append("signature", this.data.signature)
                param.append("file", file, file.name)
                param.append('success_action_status', '200')
                let config = {
                  headers: {
                    'Access-Control-Allow-Origin': '*',
                    'x-oss-callback-Authorization': getToken()
                  }
                }
                axios.post(this.data.host, param, config).then(res => {
                  if(res.status==200){
                    console.log('this.data.host',this.data.host+'/'+date+suffix)
                    let url=this.data.host+'/'+date+suffix;
                    this.form.backgroundImage=url;
                    let type=file.type;
                    this.fileList=[]
                  }
                  else{
                    this.$message.error('上传失败');
                  }

                }).catch(err => {
                  console.log(err)
                })
              }
            },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isJPG = file.type;
        const isLt2M = file.size / 1024 / 1024 < 2;

        const extension1 = file.type === "image/jpg";
        const extension2 = file.type === "image/jpeg";
        const extension3 = file.type === "image/png";
        if (!extension1 && !extension2 && !extension3) {
          this.$message.error("请上传jpg 、png、jpeg 类型图片!");
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      /* 修改登录用户 */
      updateLoginUser(data) {
        this.$store.dispatch('user/setInfo', { ...this.loginUser, ...data });
      },
      /* 头像裁剪完成回调 */
      onCrop(result) {
        this.form.avatar = result;
        this.visible = false;
        this.updateLoginUser(this.form);
      },
      /* 打开图片裁剪 */
      openCropper() {
        this.visible = true;
      }
    }
  };
</script>

<style lang="less" scoped>
  .layout-all{
    background-color: #FFFFFF;
    margin: 15px;
  }
  .system-cls{
    padding: 20px 25px 16px 25px;
    background: var(--color-white);
    border-bottom: 1px solid var(--border-color-extra-light);
    span{
      font-size: 19px;
      color: var(--color-text-primary);
    }
    div{
      margin-top: 8px;
      color: var(--color-text-secondary);
    }
  }
  .ele-body {
    padding-bottom: 0;
  }

  .el-card {
    margin-bottom: 15px;
  }

  /* 用户资料卡片 */
  .user-info-card {
    padding: 8px 0;
    text-align: center;

    .user-info-avatar-group {
      position: relative;
      cursor: pointer;
      margin: 0 auto;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      overflow: hidden;

      & > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 30px;
        display: none;
        z-index: 2;
      }

      &:hover {
        & > i {
          display: block;
        }

        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
        }
      }
    }

    .user-info-avatar {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-info-name {
      font-size: 24px;
      margin-top: 20px;
    }

    .user-info-desc {
      margin-top: 8px;
    }
  }

  /* 用户信息列表 */
  .user-info-list {
    margin-top: 30px;

    .user-info-item {
      margin-bottom: 16px;
      display: flex;
      align-items: baseline;

      & > i {
        margin-right: 10px;
        font-size: 16px;
      }

      & > span {
        flex: 1;
        display: block;
      }
    }
  }

  /* 用户标签 */
  .user-info-tags .el-tag {
    margin: 10px 10px 0 0;
  }

  /* 用户账号绑定列表 */
  .user-account-list {
    padding: 16px 20px;

    .user-account-item {
      padding: 15px;

      .ele-text-secondary {
        margin-top: 6px;
      }

      .user-account-icon {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        color: #fff;
        font-size: 26px;
        border-radius: 50%;
        background-color: #3492ed;
        box-sizing: border-box;

        &.el-icon-_wechat {
          background-color: #4daf29;
          font-size: 28px;
        }

        &.el-icon-_alipay {
          background-color: #1476fe;
          padding-left: 5px;
          font-size: 32px;
        }
      }
    }
  }

  .avatar-uploader{
      margin: 0;
      padding: 0;
      outline: none;

      /* 修改 start*/
      border: 1px solid #D9D9D9;
      border-radius: 2px;
      /*end*/
      width: 100px;
      height: 88px;
    }
    /*  ‘背景图’上传 start */
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      color: #D9D9D9;
      text-align: center;
      i{
        font-size: 28px;
      }
      div{
        padding-top: 3px;
      }
    }

  /* tab 页签 */
  .user-info-tabs {
    :deep(.el-tabs__nav-wrap) {
      padding-left: 24px;
    }

    :deep(.el-tabs__item) {
      height: 50px;
      line-height: 50px;
      font-size: 15px;
    }
  }
</style>
